<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>市场</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
	<meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
	<meta name="author" content="Codrops" />
	<link rel="shortcut icon" href="../favicon.ico">
	<link rel="stylesheet" type="text/css" href="./css/huan.css" />
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<link rel="stylesheet" type="text/css" href="./css/custom.css" />
	<script type="text/javascript" src="./js/modernizr.custom.79639.js"></script>
	<noscript>
		<link rel="stylesheet" type="text/css" href="./css/styleNoJS.css" />
	</noscript>
	<link rel="icon" href="./img/logo.png">
</head>

<body>
	<div class="demoss">

		<nav class="mulu">
			<a href="./首页.html">首页</a>
		</nav>

	</div>
	<div class="container demo-2">

		<header class="clearfix">

			<h1><img src="./img/宠爱-Photoroom.png" alt=""><span><img src="./img/智能宠物电器-Photoroom.png" alt=""></span></h1>

			<!-- <nav class="codrops-demos">
					<a href="index.html">Demo 1</a>
					<a class="current-demo" href="index2.html">Demo 2</a>
				</nav> -->

		</header>


		<div id="slider" class="sl-slider-wrapper">

			<div class="sl-slider">

				<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25"
					data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
					<div class="sl-slide-inner">
						<div class="bg-img bg-img-1"></div>
						<h2>美国短毛猫</h2>
						<blockquote>
							<p>美国短毛猫又称美洲短毛虎纹猫，是美国人把欧洲猫与美洲大陆的土种猫加以改良而育成的品种。也是美国家猫中的传统品种</p>
							<cite>American Shorthair</cite>
						</blockquote>
					</div>
				</div>

				<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15"
					data-slice1-scale="1.5" data-slice2-scale="1.5">
					<div class="sl-slide-inner">
						<div class="bg-img bg-img-2"></div>
						<h2>布偶猫</h2>
						<blockquote>
							<p>由美国加利福尼亚州的育种专家安·贝克（Ann Baker）在20世纪 60年代培育出来。布偶猫是一种可爱、安静、温和大方的猫，
								对儿童宽容，喜欢玩耍，它们友善聪明，乐于和人类互动，是较为理想的室内伴侣</p><cite>Ragdoll</cite>
						</blockquote>
					</div>
				</div>

				<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3"
					data-slice1-scale="2" data-slice2-scale="1">
					<div class="sl-slide-inner">
						<div class="bg-img bg-img-3"></div>
						<h2>暹罗猫</h2>
						<blockquote>
							<p>暹罗猫是世界著名的短毛猫，也是短毛猫的代表品种。种族原产于暹罗（今泰国），故名暹罗猫。暹罗猫能够较好适应主人当地的气候，且性格刚烈好动，机智灵活，好奇心特强，善解人意
							</p><cite>Siamese</cite>
						</blockquote>
					</div>
				</div>

				<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25"
					data-slice1-scale="2" data-slice2-scale="1">
					<div class="sl-slide-inner">
						<div class="bg-img bg-img-4"></div>
						<h2>中华田园猫</h2>
						<blockquote>
							<p>中华田园猫又称“土猫”，是食肉目猫科动物。中华田园猫中狸花猫原产于中国。中华田园猫性格活泼，独立，好奇心重，捕鼠能力强。</p><cite>Chinese Felis
								silvestris catus</cite>
						</blockquote>
					</div>
				</div>

				<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10"
					data-slice1-scale="2" data-slice2-scale="1">
					<div class="sl-slide-inner">
						<div class="bg-img bg-img-5"></div>
						<h2>波斯猫</h2>
						<blockquote>
							<p>波斯猫原产于伊朗，自19世纪起在英国培育，目前分布于全球。波斯猫是最常饲养的猫种之一，有“猫中王子”“猫中王妃”之称，观赏价值高。其性情温和，举止优雅，恋家、乐观，对人友好，适合作为伴侣动物。
							</p><cite>Felis catus</cite>
						</blockquote>
					</div>
				</div>
			</div><!-- /sl-slider -->

			<nav id="nav-dots" class="nav-dots">
				<span class="nav-dot-current"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</nav>

		</div><!-- /slider-wrapper -->

		<div class="content-wrapper">
			<h2>常见猫宠介绍</h2>
			<p>介绍一些颜值高、性格好、性情温顺的猫宠，让读者了解更多关于宠物猫的知识</p>
		</div>

	</div>
	<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="./js/jquery.ba-cond.min.js"></script>
	<script type="text/javascript" src="./js/jquery.slitslider.js"></script>
	<script type="text/javascript">
		$(function () {

			var Page = (function () {

				var $nav = $('#nav-dots > span'),
					slitslider = $('#slider').slitslider({
						onBeforeChange: function (slide, pos) {

							$nav.removeClass('nav-dot-current');
							$nav.eq(pos).addClass('nav-dot-current');

						}
					}),

					init = function () {

						initEvents();

					},
					initEvents = function () {

						$nav.each(function (i) {

							$(this).on('click', function (event) {

								var $dot = $(this);

								if (!slitslider.isActive()) {

									$nav.removeClass('nav-dot-current');
									$dot.addClass('nav-dot-current');

								}

								slitslider.jump(i + 1);
								return false;

							});

						});

					};

				return { init: init };

			})();

			Page.init();

		});
	</script>
</body>

</html>